<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="栏目名" prop="menu">
          <el-input
            v-model="queryParams.menu"
            placeholder="请输入栏目名"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入设备名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['system:device_info:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="Sort"
            @click="toggleExpandAll"
          >展开/折叠</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="device_infoList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column label="栏目名" prop="menu" />
        <el-table-column label="设备名称" align="center" prop="name" />
        <el-table-column label="图标" align="center" prop="icon" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.icon" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="批发价" align="center" prop="tradePrice" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.tradePrice" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="进货价" align="center" prop="buyPrice" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.buyPrice" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:device_info:edit']">修改</el-button>
            <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:device_info:add']">新增</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:device_info:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加或修改设备信息对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="device_infoRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="栏目名" prop="menu">
            <el-input v-model="form.menu" placeholder="请输入栏目名" />
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <image-upload v-model="form.icon" :limit="1" path="device_info/icon" />
          </el-form-item>
          <el-form-item label="批发价" prop="tradePrice">
            <image-upload v-model="form.tradePrice" :limit="1" path="device_info/price/w" />
          </el-form-item>
          <el-form-item label="进货价" prop="buyPrice">
            <image-upload v-model="form.buyPrice" :limit="1" path="device_info/price/t" />
          </el-form-item>
         <el-form-item  label="设备类型" prop="deviceType">
            <el-select
                v-model="form.deviceType">
                <el-option label="默认" value="默认" />
                <el-option label="二手平板" value="二手平板" />
                <el-option label="二手手机" value="二手手机" />
                <el-option label="二手电脑" value="二手电脑" />
                <el-option label="平板电脑" value="平板电脑" />
                <el-option label="多品类" value="多品类" />
                <el-option label="品牌笔记本" value="品牌笔记本" />
                <el-option label="手机屏幕" value="手机屏幕" />
                <el-option label="手机电池" value="手机电池" />
                <el-option label="耳机" value="耳机" />
                <el-option label="手表" value="手表" />
                <el-option label="其他" value="其他" />
                <el-option label="维修" value="维修" />
                <el-option label="二手批发" value="二手批发" />
            </el-select>
         </el-form-item>
         <el-form-item  label="所属类目" prop="type">
            <el-select
                v-model="form.type">
                <el-option label="默认" value="0" />
                <el-option label="手机批发" value="0" />
                <el-option label="电脑批发" value="1" />
                <el-option label="回收报价" value="2" />
            </el-select>
         </el-form-item>
          <el-form-item label="栏目名" prop="parentId">
            <el-tree-select
              v-model="form.parentId"
              :data="device_infoOptions"
              :props="{ value: 'id', label: 'menu', children: 'children' }"
              value-key="id"
              placeholder="请选择栏目名"
              check-strictly
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="Device_info">
  import { listDevice_info, getDevice_info, delDevice_info, addDevice_info, updateDevice_info } from "@/api/system/device_info";
  
  const { proxy } = getCurrentInstance();
  
  const device_infoList = ref([]);
  const device_infoOptions = ref([]);
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const title = ref("");
  const isExpandAll = ref(true);
  const refreshTable = ref(true);
  
  const data = reactive({
    form: {},
    queryParams: {
      menu: null,
      icon: null,
      name: null,
      tradePrice: null,
      buyPrice:null,
      deviceType: null,
      type:null,
      parentId:null
    },
    rules: {
    }
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询设备信息列表 */
  function getList() {
    loading.value = true;
    listDevice_info(queryParams.value).then(response => {
      device_infoList.value = proxy.handleTree(response.data, "id", "parentId");
      loading.value = false;
    });
  }
  
  /** 查询设备信息下拉树结构 */
  function getTreeselect() {
    listDevice_info().then(response => {
      device_infoOptions.value = [];
      console.log('数据'+JSON.stringify(response.data))
      const data = { id: 0, menu: '顶级节点', children: [] };
      data.children = proxy.handleTree(response.data, "id", "parentId");
      device_infoOptions.value.push(data);

    });
  }
      
  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }
  
  // 表单重置
  function reset() {
    form.value = {
      id: null,
      menu: null,
      icon: null,
      name: null,
      tradePrice: null,
      buyPrice:null,
      type:null,
      deviceType: null,
      parentId: null
    };
    proxy.resetForm("device_infoRef");
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  
  /** 新增按钮操作 */
  function handleAdd(row) {
    reset();
    getTreeselect();
    if (row != null && row.id) {
      form.value.parentId = row.id;
    } else {
      form.value.parentId = 0;
    }
    open.value = true;
    title.value = "添加设备信息";
  }
  
  /** 展开/折叠操作 */
  function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
      refreshTable.value = true;
    });
  }
  
  /** 修改按钮操作 */
  async function handleUpdate(row) {
    reset();
    await getTreeselect();
    if (row != null) {
      form.value.parentId = row.parentId;
    }
    getDevice_info(row.id).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改设备信息";
    });
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["device_infoRef"].validate(valid => {
      if (valid) {
        if (form.value.id != null) {
          updateDevice_info(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addDevice_info(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除设备信息编号为"' + row.id + '"的数据项？').then(function() {
      return delDevice_info(row.id);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  
  getList();
  </script>